
<script setup>
import {ref, onMounted,nextTick} from 'vue'
import useTableView from '@/hooks/use-table-view'
import DialogUser from '@/views/system/user/components/DialogUser.vue'
import useDelPop from '@/hooks/use-del-popover'
import DialogUserRole from '@/views/system/user/components/DialogUserRole.vue'
import { delUserMockApi, pageUserMockApi } from '@/api/mock-js/system/user-api'

defineOptions({
  name: 'User'
})
const queryInfo = ref({})

// table hooks
const {
  tableData,
  renderTable,
  loading,
  total,
  del,
  dialogRef,
  showDialog,
  visibleDialog
} = useTableView(queryInfo)
// 删除 hooks
const {delData, visibleDelPop, tempRef, showDelPop} = useDelPop()

// 分配角色 弹窗
const visibleUserRoleDialog = ref(false)
const dialogUserRoleRef = ref()
const showSubDialog = (row, title = '') => {
  visibleUserRoleDialog.value = true
  nextTick(() => {
    dialogUserRoleRef.value.title = title
    Object.keys(dialogUserRoleRef.value.formData).forEach(key => {
      dialogUserRoleRef.value.formData[key] = row[key]
    })
    dialogUserRoleRef.value.formData.userId = row.id
  }).then(() => {
    dialogUserRoleRef.value.setInitData?.()
  })
}
onMounted(async () => {
  await renderTable?.(pageUserMockApi, 1)
})
</script>

<template>
  <TableView class="user" v-loading="loading"
             v-model="queryInfo.pageNum"
             v-model:pageSize="queryInfo.pageSize"
             :total="total"
             @reload-table="renderTable(pageUserMockApi)">
    <template #header>
      <ViewSearchForm v-model="queryInfo"
                      :tool-list="['keyword']"
                      @on-search="renderTable(pageUserMockApi)"/>
    </template>
    <template #headerRight>
      <ElButton type="primary" @click="showDialog()">添加用户</ElButton>
    </template>
    <ElTable ref="tableRef" :data="tableData" style="width: 100%;" border stripe>
      <ElTableColumn type="index" label="ID"/>
      <ElTableColumn prop="username" label="账号" width="160"/>
      <ElTableColumn prop="nickName" label="昵称" width="200"/>
      <ElTableColumn prop="realName" label="真名" width="160"/>
      <ElTableColumn prop="phone" label="联系电话" width="140" align="center"/>
      <ElTableColumn label="角色与权限" min-width="200" #default="{row}">
        <ElTag class="ml-1" type="info" v-for="item in row.roleNames" :key="item">{{ item}}</ElTag>
      </ElTableColumn>
      <ElTableColumn label="操作" width="240" fixed="right" #default="{row}">
        <ElButton size="small" @click="e=>showDelPop(e,row,`用户账号-${row.username}`)">删除</ElButton>
        <ElButton size="small" type="primary" plain
                  @click="showSubDialog(row,`-${row.realName}(账号:${row.username})`)">
          分配角色
        </ElButton>
        <ElButton size="small" type="primary" @click="showDialog(row,`-${row.realName}(账号:${row.username})`)">编辑
        </ElButton>
      </ElTableColumn>
    </ElTable>
    <!--  删除popover start -->
    <DeletePopover v-if="visibleDelPop"
                   :temp-ref="tempRef"
                   v-model:del-info="delData"
                   v-model="visibleDelPop"
                   @on-submit="del(delData.id,delUserMockApi,pageUserMockApi)"/>
    <!--  删除popover end -->
    <!--  添加、编辑dialog  -->
    <DialogUser ref="dialogRef" v-if="visibleDialog" v-model="visibleDialog" @on-close="renderTable(pageUserMockApi)"/>
    <!--  分配角色  -->
    <DialogUserRole ref="dialogUserRoleRef" v-if="visibleUserRoleDialog" v-model="visibleUserRoleDialog"
                    @on-close="renderTable(pageUserMockApi)"/>
  </TableView>
</template>


